<template>
	<view class="filter-page parent">
		<view :style="{height:$store.state.StatusBar.statusBar + 'px'}"></view>
		<view class="tab">
			<view class="tab-item" v-for="(item, index) in tabList" :key="index" @click="switchTabbarPage(index)">
				<view class="tab-title">
					{{item}}
				</view>
				<view class="tab-image" :class="{'tab-image-unselect':currentIndex !== index}">
					<view class="active-line"></view>
				</view>
			</view>
		</view>

		<!-- <view class="main">
			<view class="item-1">
				<image class="image" src='http://osszhiyuhn1.ptszyxx.com/image/android_uid_17782_T_1702900807868.jpg'>
				</image>
				<view class="online">
					<view class="type1" v-if="item.online>4">
						<view class="dot"></view>
						<view style="color: #fff;">{{item.online}}分前在线</view>
					</view>
					<view class="type2" v-else>
						<view class="dot"></view>
						<view style="color: #fff;">在线</view>
					</view>
				</view>
				<view class="info">
					<view class="nick">昵称</view>
					<view class="title">28岁</view>
					<view class="wechat-distance">
						<view class="wechat">
							<image
								src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/home_wechat.png">
							</image>
							<text>weiow</text>
						</view>
						<view class="distance">
							<image
								src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/ic_location_blue.png">
							</image>
							<text>9km</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	 --></view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				tabList: ['同城', '世界', '新人']
			}
		},
		methods: {
			switchTabbarPage(index) {
				console.log("switchTabbarPage")
				getApp().toTicket();
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.parent {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100vw;
		box-sizing: border-box;

		.tab {
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.tab-item {
				width: 130rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.tab-title {
					font-size: 36rpx;
					color: #FDB175;
				}

				.tab-image {
					width: 50rpx;
					height: 6rpx;
					border-radius: 12rpx;
					background: #FDB175;
					margin-top: 12rpx;
					opacity: 1;
					transition: all .3s;
				}

				.tab-image-unselect {
					opacity: 0;
					transition: all .3s;
				}
			}
		}

		.main {
			flex: 1;
			background-color: rebeccapurple;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.item-1 {
				position: relative;
				margin: 10rpx;
				width: 350rpx;
				height: 420rpx;
				background-color: red;

				.image {
					width: 100%;
					height: 100%;
				}

				.online {
					display: flex;
					flex-direction: row;
					align-items: center;
					position: absolute;
					top: 20rpx;
					right: 10rpx;
					font-size: 20rpx;

					.type1 {
						display: flex;
						flex-direction: row;
						align-items: center;

						.dot {
							width: 18rpx;
							height: 18rpx;
							background-color: limegreen;
							border-radius: 50%;
							margin-right: 5rpx;
						}
					}

					.type2 {
						display: flex;
						flex-direction: row;
						align-items: center;
						padding: 8rpx 10rpx;
						background-color: limegreen;
						border-radius: 100rpx;

						.dot {
							width: 18rpx;
							height: 18rpx;
							background-color: white;
							border-radius: 50%;
							margin-right: 5rpx;
						}
					}
				}
				.info{
					
				}

			}
		}

	}
</style>